﻿@{
    ViewBag.Title = "Sites";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/css/product.css" rel="stylesheet" />
<div class="contentBody">
    
<table id="marbleTable" class="stripe row-border order-column" style="width: 100%">
    <thead>
        <tr>
            <th>SiteID</th>
            <th>Site Name</th>
            <th>Site Code</th>
            <th>Site Address</th>
            <th>Notes</th>
            <th>Site GUID</th>
            @*<th>Logo</th>*@
            <th>Version</th>
            <th>CustomeKey</th>
        </tr>
    </thead>
    <tbody>
       @foreach (var item in ViewBag.Sites)
            {  
                <tr>
                    <td> <lable>@(item.SiteId == 0 ? "" : item.SiteId) </lable> </td>
                    <td>
                        <input type="text" value="@item.SiteName"  />
                    </td>
                    <td>
                        <input type="number" value="@(item.SiteCode == 0 ? "" : item.SiteCode)"  />
                    </td>
                    <td>
                        <input type="text" value="@item.SiteAddress" />
                    </td>
                    <td>
                        <input type="text" value="@item.Notes" />
                    </td>
                    <td>
                        <input type="text" value="@item.SiteGUID" disabled="disabled"/>
                    </td>
                    @*<td>
                        <img alt="" src="@item.Logo" style="height:60px;width:60px;"/>
                        <button>Upload</button>
                    </td>*@
                    <td>
                        <input type="text" value="@item.Version" />
                    </td>
                    <td>
                        <input type="text" value="@item.CustomerKey" />
                    </td>
                </tr>  
            }
    </tbody>
</table>
</div>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveSites()">Save</button>
    <button id="addRow" class="btn btn-primary btn-md" role="button" >Add</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();"  id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>
</div>
<script>

    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 2
            }
        });
        var counter = 1;

        $('#addRow').on('click', function () {
            var fixedcolumn1values = $('.DTFC_Cloned lable, select');
            var fixedcolumn2values = $('.DTFC_Cloned input, select');
            table.row.add([
                '<lable></lable>',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" disabled="disabled"/>',
                //'<img alt="" src="" style="height:60px;width:60px;"/> <button>Upload</button>',
                '<input type="text" value="" />',
                '<input type="text" value="" />'

            ]).draw(false);
            for (var i = 0, j = fixedcolumn1values.length; i < j; i++) {
                $('.DTFC_Cloned lable, select')[i].innerHTML = fixedcolumn1values[i].innerHTML;
                $('.DTFC_Cloned input, select')[i].value = fixedcolumn2values[i].value;
            }
        });
        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });
    var updatedArray = [];
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }
    function SaveSites() {
        if (updatedArray.length > 0) {
            var sites = [];
            var table = document.getElementById('marbleTable');
            var fixedcolumn1 = $('.DTFC_Cloned lable, select');
            var fixedcolumn2 = $('.DTFC_Cloned input, select');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                if (updatedArray.includes(r)) {
                    var rowIndex = r + 1;
                    sites.push({
                        SiteId: fixedcolumn1[r].innerHTML,
                        SiteName: fixedcolumn2[r].value,
                        SiteCode: table.rows[rowIndex].cells[2].children[0].value,
                        SiteAddress: table.rows[rowIndex].cells[3].children[0].value,
                        Notes: table.rows[rowIndex].cells[4].children[0].value,
                        SiteGUID: table.rows[rowIndex].cells[5].children[0].value,
                        //Logo: table.rows[rowIndex].cells[6].children[0].value,
                        Version: table.rows[rowIndex].cells[6].children[0].value,
                        CustomerKey: table.rows[rowIndex].cells[7].children[0].value
                    });
                }
            }
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("UpdateSites", "SiteSetup")',
                data: JSON.stringify({ sites: sites }),
                dataType: "json",
                success: function (data) {
                    alert('Data Saved');
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }
    }
</script>







